<template>
  <div>
    <el-button @click="handleExport">导出excel</el-button>
    <!--
      注意使用之前先npm下载：
      npm install xlsx file-saver -S
      npm install script-loader -S -D

      之后再utils中写Export2Excel.js文件(记得修改它的导入)

      在组件中调用
     -->
  </div>
</template>

<script>
export default {
  methods: {
    // 导出组局信息
    exportUsers (exportList) {
      import('../../utils/Export2Excel.js').then((excel) => {
        // 设置导出表格的头部
        const tHeader = [
          '日志序号',
          '接口名称',
          '接口参数',
          '操作时间',
          '操作人',
          '操作者ip地址',
          '状态',
          '日志描述'
        ]
        // 将要导出的数据进行一个过滤
        /**
         * 源数据导入到excel的数据每一条重新拼成一个数组,数组里的每个元素就是filterVal里的每个字段
         */
        const data = exportList.map((item, index) => {
          return [
            index + 1,
            item.implName,
            item.param,
            item.operateTime,
            item.username,
            item.ipAddress,
            item.isSuccess,
            item.operateDesc
          ]
        })
        console.log(data)
        // 调用我们封装好的方法进行导出Excel
        excel.export_json_to_excel({
          // 导出的头部
          header: tHeader,
          // 导出的内容
          data,
          // 导出的文件名称
          filename: '日志列表',
          // 导出的表格宽度是否自动
          autoWidth: true,
          // 导出文件的后缀类型
          bookType: 'xlsx'
        })
      })
    },

    handleExport () {
      const data = [
        {
          implName: 'zs',
          param: '123',
          operateTime: 'adf',
          username: '123',
          ipAddress: 'qqq',
          isSuccess: '1231',
          operateDesc: 'up'
        }
      ]
      this.exportUsers(data)
    }
  }
}
</script>

<style>
</style>
